<template>
  <div class="cart_list">
    <div v-for="(item,index) in cartlist" :key="item.iid" class="cart_item">
      <Cart_checkbutton @click.native="checkbtnclick(item,index)" class="check_active"></Cart_checkbutton>
      <div><img :src="item.topImages" alt="" @load="cart_imgload"></div>
      <div class="cart_desc">
        <div>{{item.title}}</div>
        <div>{{item.desc}}</div>
        <div>
          <span>{{"￥"+item.price}}</span>
          <span>{{"x"+item.count}}</span>  
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cart_checkbutton from "./Cart_checkbutton";
import {mapGetters} from "vuex";

import Vue from "vue";
export default {
  name: "Cart_goodslist",
  components: {
    Cart_checkbutton,
  },
  computed: {
    ...mapGetters(["cartlist"]),
  },
  created(){
    this.test = this.cartlist;
    // console.log(this.test);
    // console.log(this.cartlist);
  },
  methods: {
    cart_imgload(){
      // console.log("cart_load");
      this.$emit("Cimgload");
    },
    checkbtnclick(item,index){
      item.isChecked = !item.isChecked;
      // console.log(this.$store.state.products[0].isChecked);
      // Vue.set(item,item.isChecked,!item.isChecked)
      // console.log(item.isChecked);
      // console.log(this.$store.state.products[0]);
    }
  }
}
</script>

<style scoped>
  .cart_item{
    width: 100%;
    height: 110px;
    margin: 10px 0px;
    display: flex;
    border-bottom: 2px solid #f6f6ff;
  }

  .cart_item img{
    width: 70px;
    height: 100px;
    border-radius: 10px;
  }

  .cart_item div:nth-child(1){
    flex: 1;
  }

  .cart_item div:nth-child(2){
    flex: 3;
  }


  .cart_desc div:nth-child(1){
    width: 200px;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    margin: 5px;
    padding-bottom: 15px;
  }

  .cart_desc div:nth-child(2){
    width: 200px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 300;
    margin: 5px;
  }

  .cart_desc div:nth-child(3){
    display: flex;
    justify-content: space-between;
    margin: 20px 5px;
  }

  .cart_desc div:nth-child(3) span{
    flex: 1;
  }

  .cart_desc div:nth-child(3) span:nth-child(1){
    color: red;
  }

  .cart_desc div:nth-child(3) span:nth-child(2){
    padding-left: 100px;
  }
  
  
  .check_active img{
    border: 1px solid skyblue !important;
    background-color: skyblue;
  }
  
  
  
</style>